<template>
  <div class="message">
    <div class="page-header">
      <span class="title-item">短信平台</span>
      <span class="download-btn">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>
    <div class="infor">
    <span>短信模板</span>
    
    <Select v-model="model" >
      <option value="" style="display: none">请提醒维修</option>
      <Option value="1" key=""> </Option>
      <Option value="2" key=""></Option>
      <Option value="3" key=""></Option>
    </Select>

    </div>
    <a-table :columns="columns" :data-source="data" :pagination="false" size="small">
      <a slot="name" slot-scope="text">{{ text }}</a>

      <span slot="action" slot-scope>
        <a>设备详情</a>
        <a-button type="primary">发送短信</a-button>
      </span>
    </a-table>
    <div class="bottom-message">
      <a-button class="editable-add-btn btn-style__class" @click="handleAdd">管理短信模板</a-button>
      <a-pagination v-model="current" :total="50" show-less-items :item-render="itemRender" />
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    key: "age",
    dataIndex: "age",
    align: "center",
    width: "5%"
  },
  {
    title: "设备名称",
    key: "name",
    dataIndex: "name",
    width: "15%"
  },
  {
    title: "设备位置",
    dataIndex: "place",
    key: "place",
    width: "40%"
  },
  {
    title: "设备状态",
    dataIndex: "state",
    key: "state",
    width: "15%",
    align: "center"
  },

  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: "15%"
  }
];

const data = [
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  },
  {
    age: "1",
    name: "xxxxxxx点仪",
    place: "xxxxxxxxx点位 ",
    state: "正常"
  }
];
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      data,
      columns,
      current: 2
    };
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    }
  },
  filter: {},
  computed: {},
  watch: {}
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped src="./index.css"></style>
<style  scoped  >
.ant-table-thead > tr > ::v-deep th {
  color: #9fb043;
  font-weight: 500;
  text-align: center;
  background-color: #2c6a60;
  border-bottom: 0px solid #2c6a60;
}
.ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-btn.active {
  background-color: #207064 !important;
  border: 0;
}
.message .ant-btn-primary {
  border: 0;
  background-color: #696969;
  color: rgba(0,0,0,0.7);
  font-weight: 600;
}
</style>